<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- css -->
    <link rel="stylesheet" href="/static/css/underlying.css" />
    <link rel="stylesheet" href="/static/css/structure.css" />
    <link rel="stylesheet" href="/static/css/apps.css" />

    <!-- js -->
    <script src="/static/js/d3-7.3.0.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

    <!-- mapbox -->
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>
    <link rel='stylesheet' href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' />
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v0.10.0/mapbox-gl-language.js'></script>
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.js'></script>
    <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css'
        type='text/css' />

    <link rel="icon" href="/static/img/AQI.ico">
    <title>空气质量数据空间集群可视分析系统</title>
</head>

<body onload="load();">
    <div id="body">
        <div id="map">
            <div id="mapChart"></div>
            <!-- <div id="mapBar"></div> -->
        </div>
        <div id="voronoi"></div>
        <div id="tree">
            <div id="aqiTree"></div>
            <div id="so2Tree"></div>
            <div id="o3_24hTree"></div>
            <div id="aqiCheckbox">
                <input id="aqiCheck" type="checkbox" checked onchange="checkboxChange()">
                <label for="aqiCheck">AQI</label>
            </div>
            <div id="so2Checkbox">
                <input id="so2Check" type="checkbox" checked onchange="checkboxChange()">
                <label for="so2Check">SO₂</label>
            </div>
            <div id="o3_24hCheckbox">
                <input id="o3_24hCheck" type="checkbox" checked onchange="checkboxChange()">
                <label for="o3_24hCheck">O₃_24h</label>
            </div>

            <div id="pm25Tree"></div>
            <div id="so2_24hTree"></div>
            <div id="o3_8hTree"></div>
            <div id="pm25Checkbox">
                <input id="pm25Check" type="checkbox" checked onchange="checkboxChange()">
                <label for="pm25Check">PM2.5</label>
            </div>
            <div id="so2_24hCheckbox">
                <input id="so2_24hCheck" type="checkbox" checked onchange="checkboxChange()">
                <label for="so2_24hCheck">SO₂_24h</label>
            </div>
            <div id="o3_8hCheckbox">
                <input id="o3_8hCheck" type="checkbox" checked onchange="checkboxChange()">
                <label for="o3_8hCheck">O₃_8h</label>
            </div>

            <div id="pm25_24hTree"></div>
            <div id="no2Tree"></div>
            <div id="o3_8h_24hTree"></div>
            <div id="pm25_24hCheckbox">
                <input id="pm25_24hCheck" type="checkbox" checked onchange="checkboxChange()">
                <label for="pm25_24hCheck">PM2.5_24h</label>
            </div>
            <div id="no2Checkbox">
                <input id="no2Check" type="checkbox" checked onchange="checkboxChange()">
                <label for="no2Check">NO₂</label>
            </div>
            <div id="o3_8h_24hCheckbox">
                <input id="o3_8h_24hCheck" type="checkbox" checked onchange="checkboxChange()">
                <label for="o3_8h_24hCheck">O₃_8h_24h</label>
            </div>

            <div id="pm10Tree"></div>
            <div id="no2_24hTree"></div>
            <div id="coTree"></div>
            <div id="pm10Checkbox">
                <input id="pm10Check" type="checkbox" checked onchange="checkboxChange()">
                <label for="pm10Check">PM10</label>
            </div>
            <div id="no2_24hCheckbox">
                <input id="no2_24hCheck" type="checkbox" checked onchange="checkboxChange()">
                <label for="no2_24hCheck">NO₂_24h</label>
            </div>
            <div id="coCheckbox">
                <input id="coCheck" type="checkbox" checked onchange="checkboxChange()">
                <label for="coCheck">CO</label>
            </div>

            <div id="pm10_24hTree"></div>
            <div id="o3Tree"></div>
            <div id="co_24hTree"></div>
            <div id="pm10_24hCheckbox">
                <input id="pm10_24hCheck" type="checkbox" checked onchange="checkboxChange()">
                <label for="pm10_24hCheck">PM10_24h</label>
            </div>
            <div id="o3Checkbox">
                <input id="o3Check" type="checkbox" checked onchange="checkboxChange()">
                <label for="o3Check">O₃</label>
            </div>
            <div id="co_24hCheckbox">
                <input id="co_24hCheck" type="checkbox" checked onchange="checkboxChange()">
                <label for="co_24hCheck">CO_24h</label>
            </div>
        </div>
        <div id="controlPanel">
            <label id="dateLabel" for="dateSelecter">Date:</label>
            <input type="date" id="dateSelecter" value="2014-05-13" min=2014-05-13 max="2021-11-13"
                onchange="dateChange();" />
            <input type="text" id="hourLabel" for="hourSelecter" value="Hour:0" disabled="disabled" />
            <input type="range" id="hourSelecter" value="0" min="0" max="23" step="1" onchange="hourLabelChange();" />
            <svg id="middleLegend"></svg>
            <input type="text" id="thresholdLabel" for="thresholdSelecter" value="Threshold:50" disabled="disabled" />
            <input type="range" id="thresholdSelecter" value="50" min="0" max="300" step="1"
                onchange="thresholdLableChange();" />
        </div>
        <div id="timeAnlysis"></div>
        <div id="legend"></div>
        <div id="navigator"></div>
    </div>

</body>

<script src="/static/js/config.js"></script>
<script src="/static/js/timeAnlysis.js"></script>
<script src="/static/js/navigator.js"></script>
<script src="/static/js/legend.js"></script>
<script src="/static/js/map.js"></script>
<script src="/static/js/voronoi.js"></script>
<script src="/static/js/tree.js"></script>

</html>